<template>
	<div>
		<el-container style="height: 100vh;">
			<el-main>
				<!-- 头部 -->
				<div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px;">
					<el-row style="background-color: #FFFFFF;height: 10px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row class="title">
						<el-col class="lv" :span="3">
							<i class="el-icon-location-information"></i>挂号预约/&nbsp;收费管理&nbsp;/
						</el-col>
						<el-col :span="1" style="color: #303133;font-size: 13px;text-align: left;">
							收费
						</el-col>
					</el-row>
					<el-row class="title" style="border-radius: 0 0 5px 5px ;">
						<el-col class="tcon" :span="3">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收&nbsp;&nbsp;费
						</el-col>
					</el-row>
					<el-row style="height: 15px;border-radius:0 0 5px 5px ;"></el-row>
				</div>
				
				<el-row style="background-color: Transparent;height:20px"></el-row>
				
				<div
					style="border-radius: 30px 30px 30px 30px;background-color: #FFFFFF;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);">
					<el-row style="height: 20px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row>
						<el-col :span="4" class="item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;患者信息查询</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row style="height: 50px;">
						<el-col :span="1">&nbsp;</el-col>
						<el-col :span="14" class="aform">
							<el-form :rules="rules" :inline="true" :model="formInline" class="demo-form-inline"
								style="height: 50px;">
								<el-form-item prop="inp_blid">
									<label slot="label" class="str" style="font-weight:bold;">病历号：</label>
									<el-input size="medium" v-model="formInline.inp_blid" placeholder="请输入病历号" clearable ref="blnum">
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-button size="medium" type="primary" icon="el-icon-search" @click="onSubmit">查询
									</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
					<el-row style="height: 4px;"></el-row>
					<el-row>
						<el-col :span="4" class="item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息确认</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row>
						<el-col :span="4" class="str">
							姓&nbsp;名:&nbsp;
							<i></i>
						</el-col>
						<el-col :span="2" class="inp">
							<el-input size="small" v-model="inp_name" placeholder="姓名" readonly="" ref="names">
							</el-input>
						</el-col>
						<el-col :span="3" class="str">
							身份证号:&nbsp;
						</el-col>
						<el-col :span="4" class="inp">
							<el-input size="small" v-model="inp_sfid" placeholder="身份证号" readonly="" ref="sfnum">
							</el-input>
						</el-col>
						<el-col :span="3" class="str">
							<i class="el-icon-s-home"></i>家庭住址:&nbsp;
						</el-col>
						<el-col :span="5" class="inp">
							<el-input size="small" v-model="inp_addr" placeholder="家庭住址" readonly="" ref="addresss">
							</el-input>
						</el-col>
					</el-row>
					<el-row style="height: 30px;"></el-row>
					<el-row>
						<el-col :span="4"
							style="text-align: left; font-size: 18px; font-family:'宋体';font-weight: bold;">
							&nbsp;&nbsp;&nbsp;消费信息
						</el-col>
						<el-col :span="19" style="text-align: right;font-size: 17px;color: #F56C6C;font-weight: bold;font-family: '微软雅黑';">
							总价：￥<el-tag type="danger" style="font-size: 17px;">{{sum_price_view}}</el-tag> </el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row>
						<el-table height="376" :row-style="{height:'10px'}"
							:cell-style="{padding:'16px 0',textAlign:'center'}"
							:header-cell-style="{textAlign:'center'}" ref="multipleTable" :data="tableData" stripe
							border tooltip-effect="dark" style="width: 92%;font-family: '微软雅黑';" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55" :selectable='handleDisable'>
							</el-table-column>
							<el-table-column prop="id" label="病历号">
							</el-table-column>
							<el-table-column prop="uname" label="姓名">
							</el-table-column>
							<el-table-column prop="iname" label="项目名称">
							</el-table-column>
							<el-table-column prop="price" label="单价/元">
							</el-table-column>
							<el-table-column prop="num" label="数量">
							</el-table-column>
							<el-table-column label="开立时间" width="250px">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.date }}</template>
							</el-table-column>
							<el-table-column label="处方状态">
								<template slot-scope="scope">
									<span v-if="scope.row.state==='未缴费'" style="color: green">未缴费</span>
									<span v-else-if="scope.row.state==='已缴费'" style="color:red;">已缴费</span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<el-row style="height: 20px;"></el-row>
					<el-row>
						<el-col :span="23">
							<el-button type="primary" plain icon="el-icon-bank-card" style="float: right;"
								@click="open">收费
							</el-button>
						</el-col>

					</el-row>
					<el-row style="height: 20px;"></el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import {
		getRequest
	} from '@/utils/api'
	export default {
		mounted: function() {
			let url = "/sf";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.infor = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
		},
		methods: {
			open() {
				let confirm_price="收费共  ￥"+this.sum_price_view;
				this.$confirm(confirm_price, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.$message({
						type: 'success',
						message: '收费成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消收费'
					});
				});
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				// let table = this.tableData // 从后台获取到的数据
				// table.forEach(item => {
				// 	if (item.state === '未缴费') {
				// 		// toggleRowSelection可以切换表格行的选中状态,接收两个参数第一个是要切换的行,这里需要的对象格式,
				// 		// 第二个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态
				// 		// 方法调用要等元素挂载才后才能执行,这里加一个判断,这个方法要放在数据获取后
				// 		this.$refs.multipleTable.toggleRowSelection(item, true)
				// 	}
				// })
				this.multipleSelection = val;
				let sum_price=0.00;
				// let toFixed=(input,num)=>Number(input).toFixed(num);
				val.forEach(item=>{
					let num_split=item.num.split('*');
					let nums=parseFloat(num_split[0]);
					let price_num=parseFloat(item.price);
					sum_price+=price_num*nums;
					console.log(price_num);
				});
				console.log(sum_price);
				this.sum_price_view=sum_price.toFixed(2);
			},
			handleDisable(row, index) {
				// 函数需要一个返回值,true为可选,false为不可选择
				if (row.state === '已缴费') {
					return false;
				} else {
					return true; // 不禁用
				}
			},
			onSubmit() {
				let infors=this.infor;
				infors.forEach(item=>{
					if(item.blid===this.formInline.inp_blid){
						this.inp_name=item.name;
						this.inp_sfid=item.sfid;
						this.inp_addr=item.address;
						this.tableData=item.secmenu;
					}
				})
			}
		},
		data() {
			return {
				inp_name:'',
				inp_sfid:'',
				inp_addr:'',
				tableData: [],
				multipleSelection: [],
				sum_price_view:'0.00',
				formInline: {
					inp_blid: ''
				},
				rules: {
					inp_blid: {
						required: true,
						message: '请输入病历号！'
					}
				},
				infor: [{
					blid: "",
					name: "",
					sfid: "",
					address: "",
					secmenu: [{
						id: '',
						uname: '',
						iname: '',
						price: '',
						num: '',
						date: '',
						state: ''
					}]
				}]
			}
		}
	}
</script>

<style scoped="scoped">
	* {
		main: 0px;
		padding: 0px;
		text-decoration: none;
		list-style: none;
	}


	.title {
		height: 35px;
		background-color: #FFFFFF;
		font-family: "微软雅黑";
		font-weight: bold;
	}

	.lv {
		font-size: 13px;
		color: #909399;
		text-align: right;
	}

	.tcon {

		font-size: 25px;
		color: #303133;
		text-align: left;
	}

	.item {
		font-size: 18px;
		font-family: "微软雅黑";
		text-align: left;
	}

	.xing {
		color: red;
		font-family: "微软雅黑";
		text-align: right;
		line-height: 40px;
	}

	.str {
		font-size: 14px;
		text-align: right;
		line-height: 40px;
		font-family: "Hiragino Sans GB";
	}

	.inp {
		text-align: right;
		line-height: 40px;
	}

	.but {
		text-align: center;
		line-height: 40px;
	}

	.aform {
		text-align: left;
		height: 50px;
	}

	.el-table {
		margin: auto;
		background-color: #EBEEF5;
	}
</style>
